<template>
    <div>
        <div id="charts_line" style="height:500px"></div>
    </div>



</template>

<script>
export default {
    methods:{
        initCharts(){
            var chart = Highcharts.chart('charts_line', {
		title: {
				text: '世界疫情情况'
		},
		subtitle: {
				text: '数据来源：冯诺依曼小组'
		},
		yAxis: {
				title: {
						text: '就业人数'
				}
		},
		legend: {
				layout: 'vertical',
				align: 'right',
				verticalAlign: 'middle'
		},
		plotOptions: {
				series: {
						label: {
								connectorAllowed: false
						},
						pointStart: 4
				}
		},
		series: [{
				name: '美国',
				data: [43934, 52503, 57177, 69658, 122222, 133333,166666, 254175]
		}, {
				name: '印度',
				data: [24916, 24064, 29742, 29851, 132490, 140282, 138121, 140434]
		}, {
				name: '英国',
				data: [11744, 17722, 16005, 19771, 20185, 124377, 132147, 139387]
		}, {
				name: '法国',
				data: [null, null, 7988, 12169, 15112, 122452, 134400, 134227]
		}, {
				name: '中国',
				data: [12908, 5948, 8105, 11248, 8989, 4444, 2222, 1111]
		}],
		responsive: {
				rules: [{
						condition: {
								maxWidth: 500
						},
						chartOptions: {
								legend: {
										layout: 'horizontal',
										align: 'center',
										verticalAlign: 'bottom'
								}
						}
				}]
		}
});
        }
    },

    mounted(){
        //在页面加载出来的时候开始渲染图表
        this.initCharts();
    }
    
}
</script>